<template>
    <view class="index">
        <view class="custom" :style="'top:' + customTop + 'px'">
            <image :src="logo" style="width: 200rpx;height: 60rpx;"></image>
        </view>
        <view class="main">
            <view class="header p_20" :style="'padding-top:' + titleHeight + 'px'">
                <view class="f_s_20 f_w_b m_t_20">感谢您的爱心</view>
                <view class="search-box m_t_20 m_b_20" >
                    <u-input v-model="queryObj.name" border="none" placeholder="输入儿童姓名搜索"></u-input>
                    <text class="search-icon" @click="updateData">搜索</text>
                </view>
                <!--                <u-search :showAction="true" actionText="搜索" :animation="true" :actionStyle="{backgroundColor: '#FF886A',color:'#fff',borderRadius:'20rpx',padding:'10rpx'}">
                                </u-search>-->
            </view>
        </view>
        <view class="content p_20">
            <view v-if="list.length>0">
                <s-goods :goodsList="list" @updateData="updateData"></s-goods>
            </view>
        </view>
        <view class="wrap">
            <u-back-top :scroll-top="scrollTop"></u-back-top>
        </view>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>

<script>
import {getByKeyApi,getOrphanListApi } from "@/sheep/api/index";
import {myMixins} from "@/mixins/myMixins";
export default {
    mixins:[myMixins],
    data() {
        return {
            search:'',
            list: [],
            banner: [],
            bannerHeight: 160,
            pickerTypeList:[],
            titleHeight: 0,
            customTop: 0,
            scrollTop: 0,
            windowHeight: uni.getSystemInfoSync().windowHeight,
            logo:''
        };
    },
    async onLoad(options) {
        this.getHeight();
        this.getLogo();
        this.getList();
    },
    onReady() {},
    onShow(options) {

    },
    methods: {
        getList(){
            console.log("this.queryObj", this.queryObj);
            getOrphanListApi(this.queryObj).then(res=>{
                this.list = this.list.concat(res.rows)
                this.total = res.total
                if (this.queryObj.pageNum*this.queryObj.pageSize<this.total){
                    this.status = 'loadmore'
                }else{
                    this.status = 'nomore'
                }
                uni.stopPullDownRefresh()
            })
        },
        async getLogo() {
            let res = await getByKeyApi("logo");
            this.logo = res.data[0]?.url;
        },
        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + res.height + 16;
            this.customTop = res.top + 3;
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        handleToInfo(item){
            uni.navigateTo({
                url: '/pages/index/info?item=' + JSON.stringify(item)
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.content{
    position: absolute;
    width: calc(100vw - 80rpx);
}
.index {
    .custom {
        position: absolute;
        left: 30rpx;
        font-size: 40rpx;
        font-weight: bolder;
    }
    .main {
        //padding: 0 30rpx;
        .header {
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                //width: 100%;
                //height: 100%;
                background: url("https://kjettbbfjh-1336647986.cos.ap-beijing.myqcloud.com/2025/01/17/4a15ae2320d344e797d70f8939b6f578.png") no-repeat;
                background-size: 100% auto;
                z-index: -2;
            }
            .search-box {
                // background-color: #fff;
                //border: #000 1rpx solid;
                border-radius: 40rpx;
                //width: 100%;
                height: 70rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 5rpx 0 30rpx;
                color: #999;
                font-size: 26rpx;
                background-color: #ffffff;
                .search-icon {
                    background-color: #FF8C6F;
                    border-radius: 40rpx;
                    color: #fff;
                    height: 60rpx;
                    width: 120rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .view {
            position: relative;
            .view-son {
                position: absolute;
                bottom: -5%;
                z-index: -1;
            }
        }
        .grid-text {
            font-size: 12px;
            color: #333;
            padding: 10rpx 0 20rpx 0rpx;
            box-sizing: border-box;
        }
        .goods-box {
            background: #af5858;
            height: 25px;
            border-radius: 4px;
        }
    }
}
</style>
